<template>
  <div class="post-list">
       <hm-bread></hm-bread>
        <!-- 面包写 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>发布文章</el-breadcrumb-item>
  </el-breadcrumb> -->

  <!-- 表单: 用于收集文章的数据 -->
    <el-form :model="form" label-width="50px">
      <el-form-item label="标题">
         <el-input class="title" v-model="form.title" placeholder="请输入文章的标题"></el-input>
    </el-form-item>
    <el-form-item label="内容">
      <vue-editor v-model='form.content'></vue-editor>
    </el-form-item>
    <el-form-item label="栏目">
         <el-checkbox-group v-model="form.categories">
           <!-- :disabled="item.id === 999" 这是禁止头条的判断 -->
          <el-checkbox v-for="item in categoryList" :key='item.id' :label='item.id' :disabled='item.id === 999'>{{ item.name }}</el-checkbox>

        </el-checkbox-group>
    </el-form-item>
    <el-form-item label="封面">
      <!--
        element-ui的upload组件会帮我们发送上传图片
        1. 需要通过 active 指定图片上传的 地址
        2. 需要通过 headers 指定请求头, 配置 token
        3. :on-success='handleSuccess' 配置文件上传成功执行的函数
        4. name='file' 指定后台接收的字段
       -->
        <el-upload
          :action="'/upload' | fixUrl"
          list-type="picture-card"
          name='file'
          :headers='headers'
          :on-success='handleSuccess'
          :on-remove='handleRemove'
          :file-list="fileList"
          >
          <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="类型">
      <!-- 单选框 -->
        <el-radio-group v-model="form.type">
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type='primary' @click='publish'>提交</el-button>
    </el-form-item>
    </el-form>

    <!-- 遍历categoryList, 展示所有的分类 -->
  </div>
</template>

<script>
// 导入富文本编辑器插件
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data () {
    return {
      form: { // 所有数据,都放到 form变单中,一起发送ajax'请求
        title: '',
        content: '',
        categories: [],
        cover: [],
        type: 1
      },
      // 所有的可供选择的分类
      categoryList: [],
      // 配置请求头
      headers: {
        // 把 token 放到请求头里面
        Authorization: localStorage.getItem('token')
      }
    }
  },
  created () {
    this.postId = this.$route.params.id
    this.getCategoryList()
    // 如果是编辑文章,需要数据的回显
    if (this.postId) {
      // 发送ajax请求,获取文章数据
      this.getPostDetail(this.postId)
      console.log(this.postId)
    }
  },
  methods: {
    // 获取到所有的栏目,不需要关注分类,所以不需要传递token
    async getCategoryList () {
      const res = await this.$axios.get('/category')
      const { statusCode, data } = res.data
      if (statusCode === 200) {
        this.categoryList = data
        console.log(this.categoryList)
      }
    },
    // 封装, 发送请求获取文章的详情信息
    async getPostDetail (id) {
      const res = await this.$axios.get(`/post/${id}`)
      const { statusCode, data } = res.data
      if (statusCode === 200) {
        // 1. 处理栏目的选择, 后台返回的categories
        data.categories = data.categories.map(item => item.id)
        // 2. 上传图片的回显处理, data.cover 数组中的每一张图片, 都要回显
        this.fileList = data.cover.map(item => {
          console.log(item)
          return {
            url: this.$axios.defaults.baseURL + item.url,
            id: item.id
          }
        })
        this.form = data
      }
    },
    // 成功的处理,存储到cover数组中
    handleSuccess (response) {
      const { statusCode, data } = response
      if (statusCode === 200) {
        console.log(data)
        this.form.cover.push({
          id: data.id
        })
      }
    },
    // 删除函数
    handleRemove (file) {
      const id = file.response.data.id
      // 删除 cover中该id的项(保留不是该 id 的项)
      this.form.cover = this.form.cover.filter(item => item.id !== id)
    },
    // 文章发布
    async publish () {
      // 后台需要的categories的格式, 和我们表单中得到的格式不一样需要处理下
      // 后台需要的格式是categories [{ id: xx }, { id: xx }]
      // 即: [2, 3, 4] => [{ id: 2 }, { id: 3 }, { id: 4 }]
      const data = { ...this.form }
      data.categories = data.categories.map(item => ({ id: item }))

      // 处理地址, 有postId, 那么就是编辑, 否则就是添加
      const url = this.postId ? `/post_update/${this.postId}` : '/post'
      const res = await this.$axios.post(url, data, {
        headers: {
          Authorization: localStorage.getItem('token')
        }
      })
      const { statusCode, message } = res.data
      if (statusCode === 200) {
        this.$message.success(message)
        this.$router.push('/post-list')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
   margin-top: 20px;
   .title {
     width: 400px;
   }
}
</style>
<style lang="scss">
.el-form-item {

    width: 800px;
  .ql-editor {
    width: 100%;
    background-color: #daa520;
  }
}
</style>
